Graphics

Graphic images -- logos, photographs, illustrations, icons, bullets, rules, etc. -- dress up a Web page, but it's easy to get carried away with the number of graphics and the size of graphics. When creating Web pages, the axiom "less is more" is applicable. Listed below are some factors to keep in mind, as well as useful tips that will help you create great-looking Web pages.

Download Time

It takes about 1 second to download 1 kilobyte (Kb) of data using a 14.4 kbps modem, today's standard.

That means a 15 Kb graphic image will take someone about 15 seconds to download. This typically limits you to one primary graphic and a few smaller ones per Web page.

You can compute the total download time of a page by adding all the graphic and text file sizes together. For a home, or index, page, the total should be kept as close as possible to 30 seconds or less.

 Graphic Image Formats

There are two types of graphic images used on the Web:

GIF (Graphic Interface Format) is the Web standard, and can have a transparent background (see below). The file extension is  ".gif".

JPEG (Joint Photographic Expert Group) is becoming more popular as more and more Web browsers support the use of in-line JPEG images. The file extension is ".jpg".

JPEGs are generally of better quality, especially for photographs, and they tend to have smaller file sizes than GIFs of equal quality. However, a JPEG cannot have a transparent background.

To convert your images to .gif or .jpg use a graphics program like Photoshop.

 Graphic Image File Sizes

The more colors in a graphic image, the bigger the file size. Two images of identical physical dimensions can be of very different file sizes. Photographs tend to be the largest sized files because they may contain hundreds of different colors.

While JPEGs tend to have smaller file sizes than GIFs, when a small number of colors is used, a GIF may actually be smaller than a JPEG. You'll have to experiment with specific images to determine which format gives you the smallest file size.

When creating graphics, save them at a resolution of 72 dpi and the maximum number of colors at 256 or less. A higher resolution, or higher number of colors, does not give you a better-looking image, it just increases the file size.

Note: Do not use a graphics program such as Photoshop to determine file size. Use your computer's file management program to come up with this figure.

Reusing Graphics Speeds Up Download Time

By reusing a graphic image on the same page or linked pages, you can speed up download time. For example, use the same logo at the top of each of your second-level Web pages (see the Small Business template). Once an image is downloaded, it is cached by your browser on your computer. Any further requests for the image are pulled from that cache, so it appears on screen almost instantly. The same goes for using bullets, icons and colorful rules, as is being done on this page and the two linked pages.

In-line Thumbnails Speed Up Download Time

Star boatBy using an in-line "thumbnail" of a larger photo, you can have a colorful image on your page without adding significantly to the download time. Then, by making the thumbnail a hyperlink, or "hot spot," the viewers can click on it to see a larger, stand-alone image. Click on the 1 Kb thumbnail JPEG photo of the sailboat on the left to view the 48 Kb full-size JPEG photo and you'll see how this works.

Transparent Backgrounds Are Cool

Transparent backgrounds are useful when displaying images of irregular shapes, such as a company logo, and you don't want a plain white background surrounding it. See the examples below for a comparison.

(If the background of the transparent logo is not the same color as the background of this page, click the Reload button  in the menu bar above.)

transparent non-transparent

For information about making gif transparent, go to:

Transparent Background Images  http://melmac.corp.harris.com/transparent_images.html

Or check the Computers and Internet : WWW  listings at http://www.yahoo.com

Using Background Images

You can use background images to add texture or special effects to the backgrounds of your Web pages. Shown below is a  100-pixel by 100-pixel sample of a typical image used for a background. The Web browsers that support background images automatically tile the image so that it fills in the entire background of the Web page. Again, it is important to keep these files small.

Click here to see this page displayed with the background image above.

TemplatesHot Tips List